<script setup lang='ts'>
import { ref,reactive,onMounted } from 'vue'
import MeasurePointDetail from './ui/MeasurePointDetail.vue'
import setUpTime from '@/utils/setUpTime'
import * as signalR from '@microsoft/signalr'
import { ALL } from '@/api/baseUrl'
import localforage from 'localforage'
import { addImg, localForageImg } from '@/utils/common.js'
import { useRoute, useRouter } from 'vue-router'

import {
  FetchLatestStrainGauges,
  AddCreate,
  UpdateCreate,
  DeleteCreate
} from '@/api/publicApi'

// 定义变量
// 路由
const route = useRoute()
const router = useRouter()

// ref
const detailDialogRef = ref()

// 表格
const tableData:any = ref([])
// 当前的机器类型
const showImageName:any = ref('')
// 图片地址
const imgURL:any = ref('')

// 点击的某项
let showItem:any = reactive({})

const cellStyle = {
  textAlign: 'center'
}

const headStyle = {
  textAlign: 'center'
}

// 定义函数
onMounted(()=> {
  getStructureList()
  init()
})
// 初始化页面
const init = async () => {
  // 获取设备测点实时数据
  var connection = new signalR.HubConnectionBuilder()
    .withUrl(`${ALL}/signalr`, {
      skipNegotiation: true,
      transport: signalR.HttpTransportType.WebSockets
    })
    .build()
  connection.start()
  connection.on('updateStrainGauge', message => {
    // 接收signalr数据
    let {
      BarWheelMachineCode,
      LastModificationTime,
      ErrorInfo,
      StrainValue,
      StructureCode,
      StructureName
    } = JSON.parse(message)
    if (BarWheelMachineCode === localStorage.BarWheelMachineCode) {
      tableData.value.forEach(item => {
        if (item.structureCode === StructureCode) {
          (item.strainValue = StrainValue),
          (item.structureName = StructureName),
          (item.errorInfo = ErrorInfo),
          (item.lastModificationTime = setUpTime.formatTime(LastModificationTime))
        }
      })
    }
    // 按时间排序
    tableData.value.sort(function (a, b) {
      return b.lastModificationTime < a.lastModificationTime
    })
  })
  connection.onclose(() => setTimeout(() => {
    connection.start()
  }, 5000))
  console.log(route.path.split('-'))
  if (route.path.split('-')[1] === 'DQ') {
    showImageName.value = '堆取料机'
  } else if (route.path.split('-')[1] === 'D') {
    showImageName.value = '堆料机'
  } else {
    showImageName.value = '取料机'
  }
  console.log(showImageName)

  imgURL.value = await localforage.getItem(showImageName)
  if (imgURL.value instanceof Blob) {
    addImg(showImageName, 'imgContainer')
  } else {
    // 没有缓存：请求图片添加到缓存里  这里必须使用require传递图片路径
    // await localForageImg(require('@/assets/' + this.showImageName + '.jpg'), this.showImageName)
    // 获取缓存中的图片
    addImg(showImageName, 'imgContainer')
  }
}
// 获取表格数据
const getStructureList = () => {
  let params = {
    BarWheelMachineCode: localStorage.BarWheelMachineCode
  }
  FetchLatestStrainGauges(params).then(res => {
    res.result.forEach(item => {
      if (item.relationDeviceType === 310) {
        item.sensorTypeName = '应力'
      }
      item.lastModificationTime = setUpTime.formatTime(
        item.lastModificationTime
      )
    })
    tableData.value = []
    tableData.value = [ ...res.result ]
  })
}

// 展示弹框
const showItemInfo = (row: any) => {
  console.log('点击的某项----》')
  showItem = {}
  showItem = { ...row }
  detailDialogRef.value.showDialog(row)
}
</script>

<template>
  <div class="steel-structure-main-box">
    <div class="img-box">
      <img src="../../../assets/imgs/overview.png">
    </div>
    <div class="table-box">
      <el-table
        :cell-style="cellStyle"
        :header-cell-style="headStyle"
        :data="tableData"
        max-height="300"
        size="small"
      >
        <el-table-column
          prop="structureCode"
          label="编号"
        />
        <el-table-column
          prop="structureName"
          label="测点名称"
        >
          <template #defaults="scope">
            <div
              class="name-hove"
              @click="showItemInfo(scope.row)"
            >
              {{ scope.row.structureName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="strainValue"
          label="值(Mpa)"
        />
        <el-table-column
          prop="sensorTypeName"
          label="类型"
        />
        <el-table-column
          prop="errorInfo"
          label="状态"
        >
          <template #default>
            <div class="status-box">
              <div
                v-if="true"
                class="normal"
              />
              <div
                v-else-if="false"
                class="first-level"
              />
              <div
                v-else
                class="second-level"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="lastModificationTime"
          label="更新时间"
        />
      </el-table>
    </div>
  </div>
  <MeasurePointDetail
    ref="detailDialogRef"
    :show-item="showItem"
  />
</template>

<style scoped lang=scss>
.steel-structure-main-box {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #fff;

  .img-box {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 60%;

    /* border: 1px solid red; */

    >img {
      width: 80%;
      height: 100%;

      /* border: 1px solid green; */
    }
  }

  .table-box {
    margin-top: 10px;

    .status-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;

      .normal,
      .first-level,
      .second-level {
        width: 105px;
        height: 30px;
      }

      .normal {
        background-color: rgb(34 243 76);
      }

      .first-level {
        background-color: #ede215;
      }

      .second-level {
        background-color: #fe0808;
      }
    }
  }
}
</style>